<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型</title>
    <style>
        .borderdemo{
            border-style: solid;
            border-color: rgb(47, 154, 255);
            border-width: 10px;
            border-bottom: 30px solid black;
           
       
            width: 300px;
            height:  200px;
            background-color: rgb(255, 17, 0);
        }

        .dome{
            background-color: aqua;
            display: inline-block;
            border: 5px solid gold; ;
        }
    </style>
</head>

<body>
    <!-- 属性名
    内容(Content) 内边距(Padding)   边框(Border)  外边距(Margin)
    说明
    盒子包含的实际内容，比如文本、图片等。
    围绕在内容的内部，是内容与边框之间的空间。
    可以使用padding属性来设置:
    围绕在内边距的外部，是盒子的边界。
    可以使用`border'属性来设置。
    围绕在边框的外部，是盒子与其他元素之间的空间。
    可以使用margin`属性来设置。 -->

    <div class="dome">dome</div>
    <div class="borderdemo">border-demo</div>
</body>

</html>